<template>
  <div class="cnode-list-wrap">
      <router-link 
        v-for="item of list.data" 
        :key="item.id"
        :to="`/detail/${item.id}`" 
        tag="div"
        class="cnode-list-item"
        >
        <div class="cnode-list-item-title">
            <label class="cnode-item-info" 
                :class="getTabInfo(item.tab, item.good, item.top, true)">
                {{ getTabInfo(item.tab, item.good, item.top, false) }}</label>
            <span class="cnode-item-name">
                {{ item.title }}
            </span>
        </div>
        <div class="cnode-item-meta">
          <avatar :src="item.author.avatar_url" :alt="item.author.loginname"></avatar>
          <div class="cnode-item-meta-info">
            <section class="cnode-item-meta-item">
              <span class="cnode-item-author">{{ item.author.loginname }}</span>
              <div class="cnode-item-numbers">
                <span class="reply-num">{{ item.reply_count }}</span>
                /
                <span class="visit-num">{{ item.visit_count }}</span>
              </div>
            </section>
            <section class="cnode-item-meta-item">
              <timeago :since="item.create_at" class="cnode-item-timeago"></timeago>
              <timeago :since="item.last_reply_at" class="cnode-item-timeago"></timeago>
            </section>
          </div>
        </div>
      </router-link>
    </div>
</template>
<script>
import Avatar from '@/components/Avatar'
import { getTabInfo } from '@/assets/libs/names'

export default {
  props: {
    list: Object
  },
  components: {
    Avatar
  },
  methods: {
    getTabInfo
  }
}
</script>
<style lang="stylus" scoped>
.cnode-list-item
    border-bottom 1px solid #ccc
    padding 10px 0
    &:first-child
        margin-top 10px
.cnode-list-item-title
    display flex
    padding 0 16px
    margin-bottom 5px
    align-items center
.cnode-item-info
    display inline-block
    padding 2px 4px
    color #fff
    border-radius 2px
    font-size 12px
    flex-shrink 0
    margin-right 10px
    &.top 
        background: #E74C3C;
    &.ask 
        background: #3498DB;
    &.good
        background: #E67E22;
    &.job
        background: #9B59B6;
    &.share
        background: #1ABC9C;
    &.dev
        background #ccc
.cnode-item-name
    flex 1
    overflow hidden
    text-overflow ellipsis
    min-width 0
    white-space nowrap
.cnode-item-meta
    display flex
    padding 0 16px
    font-size 12px
    color #888
    align-items center
.cnode-item-meta-info
    display flex
    flex-direction column
    flex 1
    margin-left 10px
.cnode-item-meta-item
    display flex
    justify-content space-between
</style>
